<template>
  <div class="controls">
    <div class="controls-item">
      视频输入：
      <div class="radio-group">
        <div class="radio-button" :class="{'active':video=='video'}" @click="onVideoTypeChange('video')">摄像头</div>
        <div class="radio-button" :class="{'active':video=='desktop'}" @click="onVideoTypeChange('desktop')">投屏</div>
        <div class="radio-button" :class="{'active':video==null}" @click="onVideoTypeChange(null)">关闭</div>
      </div>
    </div>

    <div class="controls-item">
      音频输入：
      <div class="radio-group">
        <div
          class="radio-button"
          :class="{'active':audio=='audio'}"
          @click="onAudioTypeChange('audio')"
        >麦克风</div>
        <div
          class="radio-button"
          :class="{'active':audio==null}"
          @click="onAudioTypeChange(null)"
        >关闭</div>
      </div>
    </div>
    <div class="controls-item">
      <div class="leave-button" @click="onLeaveButtonClicked">挂断</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    conference: Object
  },
  data() {
    return {
      //当前视频类型（null：关闭，video:摄像头，desktop：桌面投屏）
      video: null,

      //当前音频状态（null：关闭，audio：开启）
      audio: null
    };
  },
  created() {},
  methods: {
    //挂断
    onLeaveButtonClicked() {
      this.conference.leave();
      this.$router.push({ name: "home"});
    },
    async onVideoTypeChange(type) {
      if(this.video){
        await this.conference.removeLocalTrack("video");
      }
      if(type){
        await this.conference.addLocalTrack(type);
      }
      this.video = type
    },
    async onAudioTypeChange(type) {
      if(this.audio){
        await this.conference.removeLocalTrack("audio");
      }
      if(type){
        await this.conference.addLocalTrack(type);
      }
      this.audio =type
    }
  },
  watch: {
    
  },
  computed: {}
};
</script>
<style lang="scss" scoped>
.controls {
  background: lightgrey;
  overflow: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  .controls-item {
    display: flex;
    margin: 0 10px;
    align-items: center;
  }
}
.radio-group {
  height: 30px;
  display: flex;
  .radio-button {
    cursor: pointer;
    display: flex;
    height: 100%;
    width: 100px;
    background: greenyellow;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
  }
  .radio-button.active {
    border: 1px solid gray;
  }
}
.leave-button {
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100px;
  background: red;
}
</style>
